<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/common.js"></script>
    <script src="../js/ajax.js"></script>
    <script src="../js/api.js"></script>
    <style>
        .right {
            font-size: 12px;
            color: green;
        }

        .err {
            font-size: 12px;
            color: red;
        }
    </style>
</head>

<body>
    <!-- <span class="user_span" style="color: red;font-size: 12px;"></span> -->
    <form class="form" onsubmit="return false" autocomplete="on">
        <p>
            <label>用户名:</label>
            <input class="user" type="text">
            <span class="user_span"></span>
        </p>
        <p>
            <label>密&emsp;码:</label>
            <input class="pwd" type="text">
            <span class="pwd_span"></span>
        </p>
        <p>
            <label>邮&emsp;箱:</label>
            <input class="email" type="text">
            <span class="email_span"></span>
        </p>
        <p>
            <label>手机号:</label>
            <input class="phone" type="text">
            <span class="phone_span"></span>
        </p>
        <p>
            <label>验证码:</label>
            <input class="code" type="text">
            <span class="createCode">1234</span>
            <span class="code_span"></span>
        </p>
        <p>
            <button class="btn">点击</button>
        </p>
    </form>
</body>
<script>
    // 用户名 
    // 由 数字,大小写字母,_,$ 组成, 6-12位,且不能以数字开头

    // 要求
    // 1.  由 数字,大小写字母,_,$ 组成
    // 2.  6-12位
    // 3.  不能以数字开头

    // 按照从易到难的顺序 验证
    //  a. 6-12位
    //  b. 不能以数字开头    => 找到开头 判断是否是数字; 
    //  c. 由 数字,大小写字母,_,$ 组成

    //  由 数字,大小写字母,_,$ 组成  遍历字符串 判断每个字符是否都合法(是否存在非法字符)

    // 方法1：  找码表范围
    // 数字     charCode>=48 && charCode<=57
    // 大写字母   charCode>=65 && charCode<=90
    // 小写字母   charCode>=97 && charCode<=122
    // _  $      charCode==45 || charCode==36  




    var userInp = document.getElementsByClassName("user")[0];
    var userSpan = document.getElementsByClassName("user_span")[0];

    var pwdInp = document.getElementsByClassName("pwd")[0];
    var pwdSpan = document.getElementsByClassName("pwd_span")[0];

    var phoneInp = document.getElementsByClassName("phone")[0];
    var phoneSpan = document.getElementsByClassName("phone_span")[0];

    var emailInp = document.getElementsByClassName("email")[0];
    var emailSpan = document.getElementsByClassName("email_span")[0];

    var codeInp = document.getElementsByClassName("code")[0];
    var codeSpan = document.getElementsByClassName("code_span")[0];
    var createCodeSpan = document.getElementsByClassName("createCode")[0];

    var btn = document.getElementsByClassName("btn")[0];

    createCodeSpan.innerText = randCode();

    createCodeSpan.onclick = function () {
        createCodeSpan.innerText = randCode();
    }

    var userFlag = false;
    var pwdFlag = false;
    var emailFlag = false;
    var phoneFlag = false;
    var codeFlag = false;

    // 一步到位
    userInp.onblur = async function () {
        var user = userInp.value;
        var reg = /^[a-zA-Z_$][\w$]{5,11}$/;
        userFlag = false;   // 每次验证之前先重置为false
        if (reg.test(user)) {
            // userSpan.textContent = "√";
            // userSpan.className = "right";
            // userFlag = true;

            /* let result = await isExist({ user });
            var { status, detail } = result;
            if (status) {
                userSpan.textContent = "√";
                userSpan.className = "right";
                userFlag = true;
            } else {
                userSpan.textContent = detail;
                userSpan.className = "err";
            } */

            isExist({ user }).then((result) => {
                var { status, detail } = result;
                if (status) {
                    userSpan.textContent = "√";
                    userSpan.className = "right";
                    userFlag = true;
                } else {
                    userSpan.textContent = detail;
                    userSpan.className = "err";
                }
            }).catch(err => {
                throw err;
            })

            // $.ajax({
            //     // type:"get",
            //     url: "../php/isExist.php",
            //     data: { user }, // {user: user},
            //     // async:true,
            //     dataType: "json",
            //     success: function (result) { // result 形参 接口返回的数据
            //         var { status, detail } = result;
            //         if (status) {
            //             userSpan.textContent = "√";
            //             userSpan.className = "right";
            //             userFlag = true;
            //         } else {
            //             userSpan.textContent = detail;
            //             userSpan.className = "err";
            //         }
            //     }
            // })

            // var xhr = new XMLHttpRequest();

            // xhr.open("get", `../php/isExist.php?user=${user}`, true);

            // xhr.send();

            // xhr.onreadystatechange = function () {
            //     if (xhr.readyState == 4 && xhr.status == 200) {
            //         var { status, detail } = JSON.parse(xhr.responseText);
            //         if (status) {
            //             userSpan.textContent = "√";
            //             userSpan.className = "right";
            //             userFlag = true;
            //         } else {
            //             userSpan.textContent = detail;
            //             userSpan.className = "err";
            //         }
            //     }
            // }


        } else {
            userSpan.textContent = "用户名由数字,字母,下划线,$组成 6-12位,不能以数字开头";
            userSpan.className = "err";
        }
    }

    pwdInp.onblur = function () {
        var pwd = pwdInp.value;
        var reg = /^[\w$]{6,12}$/;
        pwdFlag = false;
        if (reg.test(pwd)) {
            // pwdSpan.textContent = "√";
            // pwdSpan.className = "right";

            var numFlag = false;
            var smallFlag = false;
            var bigFlag = false;
            var speFlag = false;

            var numReg = /[0-9]/;
            var smallReg = /[a-z]/;
            var bigReg = /[A-Z]/;
            var speReg = /[_$]/;

            if (numReg.test(pwd)) {
                numFlag = true;
            }
            if (smallReg.test(pwd)) {
                smallFlag = true;
            }
            if (bigReg.test(pwd)) {
                bigFlag = true;
            }
            if (speReg.test(pwd)) {
                speFlag = true;
            }

            var sum = numFlag + smallFlag + bigFlag + speFlag;

            pwdSpan.textContent = "密码强度:" + sum;
            pwdSpan.className = "right";

            pwdFlag = true;

        } else {
            pwdSpan.textContent = "密码由数字,字母,下划线,$组成 6-12位";
            pwdSpan.className = "err";
        }
    }

    emailInp.onblur = function () {
        var email = emailInp.value;
        var reg = /^\w{6,18}@\w+\.com$/
        emailFlag = false;
        if (reg.test(email)) {


            isExist({ email }).then((result) => {
                var { status, detail } = result;
                if (status) {
                    emailSpan.textContent = "√";
                    emailSpan.className = "right";
                    emailFlag = true;
                } else {
                    emailSpan.textContent = detail;
                    emailSpan.className = "err";
                }
            }).catch(err => {
                throw err;
            })
            // emailSpan.textContent = "√";
            // emailSpan.className = "right";
            // emailFlag = true;
        } else {
            emailSpan.textContent = "请输入正确的邮箱";
            emailSpan.className = "err";
        }
    }

    phoneInp.onblur = function () {
        var phone = phoneInp.value;
        var reg = /^1[3-9]\d{9}$/
        phoneFlag = false;
        if (reg.test(phone)) {

            isExist({ phone }).then((result) => {
                var { status, detail } = result;
                if (status) {
                    phoneSpan.textContent = "√";
                    phoneSpan.className = "right";
                    phoneFlag = true;
                } else {
                    phoneSpan.textContent = detail;
                    phoneSpan.className = "err";
                }
            }).catch(err => {
                throw err;
            })

            // phoneSpan.textContent = "√";
            // phoneSpan.className = "right";
            // phoneFlag = true;
        } else {
            phoneSpan.textContent = "请输入正确的邮箱";
            phoneSpan.className = "err";
        }
    }

    codeInp.onblur = function () {
        var code = codeInp.value;  //用户输入的
        var _rand = createCodeSpan.innerText;
        var reg = new RegExp(_rand, "i");
        codeFlag = false;
        if (code) {
            if (reg.test(code)) {
                codeSpan.textContent = "√";
                codeSpan.className = "right";
                codeFlag = true;
            } else {
                codeSpan.textContent = "x";
                codeSpan.className = "err";
            }
        } else {
            codeSpan.textContent = "请输入验证码";
            codeSpan.className = "err";
        }
    }




    btn.onclick = function () {
        // 全都验证成功跳转 (立flag)
        if (userFlag && pwdFlag && emailFlag && phoneFlag && codeFlag) {

            var user = userInp.value;
            var pwd = pwdInp.value;
            var phone = phoneInp.value;
            var email = emailInp.value;



            login({ user, pwd, phone, email }).then((result) => {
                var { status, detail } = result;
                if (status) {
                    location.href = "./login.html";
                } else {
                    alert(detail);
                }
            }).catch(err => {
                throw err;
            })



            // $.ajax({
            //     type: "post",
            //     url: "../php/register.php",
            //     data: { user, pwd, phone, email }, // {user: user},
            //     // async:true,
            //     dataType: "json",
            //     success: function (result) { // result 形参 接口返回的数据
            //         var { status, detail } = result;
            //         if (status) {
            //             location.href = "./login.html";
            //         } else {
            //             alert(detail);
            //         }
            //     }
            // })


            /* var xhr = new XMLHttpRequest();

            xhr.open("post", `../php/register.php`, true);

            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

            xhr.send(`user=${user}&pwd=${pwd}&phone=${phone}&email=${email}`);

            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // console.log(xhr.responseText);
                    // var result = JSON.parse(xhr.responseText);
                    // console.log(result);
                    // if (result.status) {
                    //     location.href = "./login.html";
                    // } else {
                    //     alert(result.detail)
                    // }

                    var { status, detail } = JSON.parse(xhr.responseText);
                    if (status) {
                        location.href = "./login.html";
                    } else {
                        alert(detail);
                    }




                }
            } */
        }
    }

</script>

</html>